<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <h1>使用场景：给某个对象属性添加一个属性并给属性值</h1>

        <button @click="addSex">添加一个性别属性，默认值是男</button>
        <h2>姓名：{{student.name}}</h2>
        <h2>年龄：{{student.age}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>

    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el: "#root",
        data: {
            student: {
                name: 'tom',
                age: 18,
            }
        },
        methods: {
            addSex() {
                Vue.set(this.student, 'sex', '男')
                // 或者加上$符号也可以，都一样
                // Vue.$set(this.student,'sex','男')
                // 只能给data里的属性添加属性，不能直接给data这个根对象添加属性
            }
        },
    })
</script>

</html>